<template>
  <div class="chart5">
    <div class="chart5-header">
      <div>年：<el-date-picker size="small" v-model="searchYear" value-format="yyyy" type="year" placeholder="选择年份" />
      </div>
      <!-- 季度 quarter,el-select-->
      <div>季度：<el-select size="small" clearable v-model="quarter" placeholder="选择季度">
          <el-option label="第一季度" value="1" />
          <el-option label="第二季度" value="2" />
          <el-option label="第三季度" value="3" />
          <el-option label="第四季度" value="4" />
        </el-select></div>

      <div>月：<el-date-picker size="small" v-model="searchMonth" value-format="yyyy-MM" type="month"
          placeholder="选择月份" /></div>
      <div v-if="roles.includes('admin')">区域：<el-select size="small" clearable v-model="origin" placeholder="选择区域">
          <el-option label="中国大陆" value="1" />
          <el-option label="台湾地区" value="2" />
          <el-option label="日本" value="3" />
        </el-select></div>
      <div>店头: <el-select size="small" clearable v-model="deptId" placeholder="选择店头">
          <el-option v-for="item in ditou" :key="item.id" :label="item.name" :value="item.id" />
        </el-select></div>
    </div>
    <div style="display: flex;gap: 10px;height: 100%;margin-top: 10px;">
      <div id="chart5" style="flex: 1;"></div>
      <chart6 :cardData="cardData6" style="flex: 1;" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { bussinessBingtu } from '@/api/system/order'
import { selectChildrenDeptAndCurDeptById } from '@/api/system/order'

import chart6 from './chart6.vue'


export default {
  data() {
    return {
      searchYear: '',
      searchMonth: '',
      origin: '',
      quarter: '',
      cardData6: {},
      ditou: [],
      deptId: '',
      roles: []
    }
  },
  components: {
    chart6
  },
  created() {
    this.roles = this.$store.getters.roles;

  },
  watch: {
    searchYear: {
      handler(newVal) {
        this.init()
      },
    },
    searchMonth: {
      handler(newVal) {
        if (newVal) {
          this.searchYear = newVal.split('-')[0]
          this.searchMonth = newVal
          this.quarter = ''
          this.init()
        } else {
          // this.searchYear = ''
          this.init()
        }
      },
    },
    origin: {
      handler(newVal) {
        this.origin = newVal
        this.getDeptList()


      },
    },
    quarter: {
      handler(newVal) {
        //先判断年份
        if (this.searchYear) {
          if (newVal) {
            this.quarter = newVal
            this.searchMonth = ''
            this.init()
          }
        } else {
          this.quarter = ''
          this.$message.warning('请先选择年份')
        }
      },
    },
    deptId: {
      handler(newVal) {
        this.deptId = newVal
        this.init()
      },
    }
  },
  mounted() {
    setTimeout(() => {
      this.getDeptList()
    }, 100);
  },
  methods: {
    getDeptList() {
      let deptId = ''
      if (this.origin == 1) {
        deptId = 110
      }
      if (this.origin == 2) {
        deptId = 111
      }
      if (this.origin == 3) {
        deptId = 101
      }
      selectChildrenDeptAndCurDeptById({ searchYear: '', searchMonth: '', origin: '', deptId: deptId }).then(res => {
        console.log(res.data);
        if (res.data) {
          this.ditou = res.data.map(item => {
            return {
              id: item.deptId,
              name: item.deptName
            }
          })
          //默认选中第一个
          this.deptId = this.ditou[0].id
          this.init()

        }
      })
    },
    init() {
      const chartDom = document.getElementById('chart5')
      const myChart = echarts.init(chartDom)
      myChart.showLoading()
      let deptId = this.deptId || ''



      bussinessBingtu({ searchYear: this.searchYear, searchMonth: this.searchMonth, origin: this.origin, quarter: this.quarter, "deptDetail": true, deptId: deptId }).then(res => {
        console.log(res);
        this.cardData6 = res.data.jianding
        this.initChart(res.data)
        myChart.hideLoading()
      })
    },
    initChart(res) {
      console.log(res);
      const chartDom = document.getElementById('chart5')
      const myChart = echarts.init(chartDom)
      const data = []
      const total = (res.jpyJianDingTotal || 0) + (res.jpyFanMaiTotal || 0)

      // 鉴定相关
      const jianDingValue = res.jpyJianDingTotal || 0
      const jianDingPercent = total ? ((jianDingValue / total) * 100).toFixed(2) : '0.00'
      data.push({
        value: jianDingValue,
        name: '鉴定相关营业额',
        percent: jianDingPercent
      })

      // 贩卖相关
      const fanMaiValue = res.jpyFanMaiTotal || 0
      const fanMaiPercent = total ? ((fanMaiValue / total) * 100).toFixed(2) : '0.00'
      data.push({
        value: fanMaiValue,
        name: '贩卖相关营业额',
        percent: fanMaiPercent
      })

      const option = {
        title: {
          left: 'center',
          top: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}日元 ({d}%)',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#333'
          },
          padding: [10, 15]
        },
        legend: {
          orient: 'vertical',
          right: '5%',
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          formatter: function (name) {
            const item = data.find(item => item.name === name)
            return `${name}\n${item.value}日元\n${item.percent}%`
          },
          textStyle: {
            color: '#666',
            fontSize: 12,
            lineHeight: 20
          }
        },
        series: [
          {
            name: '营业额类型',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut'
      }

      option && myChart.setOption(option)

      // 添加响应式调整
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart5 {
  width: 100%;

  #chart5 {
    height: 100%;
  }

  .chart5-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }
}
</style>
